<template>
  <div  style="text-align:center ;"></div>
  <div class="shop">商家：{{ cartfood[0]?cartfood[0].name.business:""}}</div>
  <div class="box">
  <TransitionGroup tag="ul" name="list" class="container" >
    <div v-for="item in cartfood" :key="item.name.name" >
      <Cartfoods :name=item.name.name :num=item.num :url=item.name.url :price=item.name.price @del="del(item.name.name)"
        @change="change" />
    </div>
  </TransitionGroup>
  <div class="footer">
    <div class="place"></div>
    <div class="text">共需支付：{{ allprice }}￥</div>
    <el-button type="danger" size="large" class="btn" round @click="takefood">下订单</el-button>
  </div>
</div>
</template>
<script lang="ts" setup>
import { takeorder } from '@/api/Order';
import { storeA } from '@/piniaStore/storeA'
import { ref } from 'vue';
import Cartfoods from "../components/Cartfoods.vue"
let piniaStoreA = storeA()
const cartfood = ref(piniaStoreA.Cartfood)
let allprice = ref(0)
cartfood.value.forEach((item) => {
  allprice.value += item.name.price * item.num
})
//数目改变重新计算总价
function change() {
  console.log("重新计价")
  allprice.value = 0
  cartfood.value.forEach((item) => {
    allprice.value += item.name.price * item.num
  })
}
function del(data: string) {
  console.log(data)
  piniaStoreA.delCartfood(data)
  change()//删除商品后重新计价
}
//确认下单
function takefood(){
  let takefood:any = []
  let shopname:string=""
  cartfood.value.forEach((item)=> {
    shopname = item.name.business
    item.name.num = item.num
    takefood.push(item.name)
  });
  console.log(shopname)
  takeorder(takefood,shopname)
}
</script>
<style scoped >
.box{
  height: 150px;
}
  .footer {
  display: flex;
  text-align: center;
  height: 45%;
  width: 80%;
  background-color: #F7EEAD;
  border-radius: 10px;
  margin: auto;
  margin-top: 5%;
}
.shop{
  text-align:center;
  color:#8e8225;
  font-size: 30px;
}
.place{
  width: 50%;
}
.text {
  margin: auto;
  left: 100px;
  color: #D24735;
  font: 23px/1.5 Tahoma, Helvetica, Arial, '宋体', sans-serif;
}
.btn {
  height: 50px;
  width: 80px;
  margin: auto;
}
.container{
  position: relative;
  padding: 0;
}

/* 动画效果 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
</style>
